<template>
  <div>
    <nav class="app-topnav">
      <div class="commonwidth">
        <ul>
          <li><a v-if="!$store.state.login.sccount"  href="javascript:;" @click="loginbox">请先登录</a><span v-else>{{$store.state.login.sccount}}</span></li>
          <li><a v-if="!$store.state.login.sccount"  href="#">免费注册</a><span    v-else   @click="clk()">退出登录</span></li>
          <li><a href="#">我的订单</a></li>
          <li><a href="#">会员中心</a></li>
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="/#/cartg">手机版</a></li>
        </ul>
      </div>
    </nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
        account:''
    };
  },
  methods: {
    loginbox() {
      // this.$router.push({name:'/login'})
      this.$router.push({ path: "/login" });
      // console.log('in');
    },
    clk(){
      this.$router.push({ path: "/login" });
      // this.$store.commit('settoken','')
      // this.$store.commit('setsccount','')
      localStorage.clear()
    window.location.reload()
    }
  },
  mounted(){
      // this.account = localStorage.account
    // console.log(this.$store.state.login.sccount);
  }
};
</script>
<style scoped>
#app {
  width: 100%;
  height: 1000px;
  background: #f5f5f5;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
i,
em,
b,
strong {
  font-weight: 400;
  font-style: normal;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
/* 共同宽度 */
.gtwidth {
  width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
/* input */
input,
select,
textarea {
  outline: none;
  /* 取消外轮廓线 */
}
textarea {
  resize: none;
  /* 取消拖拽效果 */
}
img {
  vertical-align: top;
  /* 取消图片上下间距 */
  border: 0;
  /* 取消ie6图片产生边框的问题     兼容问题 */
}
.clearfix:after {
  display: table;
  content: "";
  clear: both;
}

/* 清除浮动 */
.clearfix:after,
clearfix:before {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.commonwidth {
  /* 版心 */
  width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
}
.app-topnav {
  background-color: #333;
}
.app-topnav ul {
  display: flex;
  height: 53px;
  justify-content: flex-end;
  align-items: center;
}
.app-topnav ul li a {
  padding: 0 15px;
  color: #cdcdcd;
  line-height: 1;
  display: inline-block;
}
.app-topnav ul li span {
  padding: 0 15px;
  color: #cdcdcd;
  line-height: 1;
  display: inline-block;
}
</style>